import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_taotaoshipin/app/app_controller.dart';
import 'package:flutter_taotaoshipin/base/base_state.dart';
import 'package:flutter_taotaoshipin/common/theme/app_colors.dart';
import 'package:flutter_taotaoshipin/pages/drama/drama_routes.dart';
import 'package:flutter_taotaoshipin/util/theme_utils.dart';
import 'package:flutter_taotaoshipin/widget/load_image.dart';
import 'package:flutter_taotaoshipin/widget/my_tab.dart';
import 'package:get/get.dart';

import 'drama_controller.dart';
import 'drama_state.dart';

class DarmaPage extends StatefulWidget {
  const DarmaPage({super.key});

  @override
  State<DarmaPage> createState() => _DarmaPageState();
}

class _DarmaPageState extends State<DarmaPage> with AutomaticKeepAliveClientMixin {
  final DramaController controller = Get.find();
  final DramaState state = Get.find<DramaController>().state;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<DramaController>(
      builder: (controller) {
        return Scaffold(
          body: state.isLoading
              ? const Center(child: CircularProgressIndicator.adaptive())
              : _buildContent(),
        );
      },
    );
  }

  _buildContent() {
    return Stack(
      children: [
        Container(
          width: double.infinity,
          height: 83.w,
          color: AppColors.app_main,
        ),
        Container(
          width: double.infinity,
          height: double.infinity,
          margin: EdgeInsets.only(top: 52.w),
          padding: EdgeInsets.only(top: 16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Row(
            children: [
              Container(
                width: 83.w,
                height: double.infinity,
                decoration: BoxDecoration(
                  color: Color(0xFFEBEFF7),
                ),
                child: ListView.builder(
                  padding: EdgeInsets.zero,
                  itemBuilder: (context, index) {
                    var model = state.tabTitleList[index];
                    return _buildItem(
                      model,
                      isSelected: state.selectedIndex == index,
                      onTap: () {
                        controller.switchTap(index);
                      },
                    );
                  },
                  itemCount: state.tabTitleList.length,
                ),
              ),
              Expanded(
                child: PageView(
                  controller: controller.pageController,
                  children: state.pageList,
                  onPageChanged: controller.onPageChanged,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildItem(String title, {bool isSelected = false, Function()? onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        children: [
          Container(
            alignment: Alignment.center,
            height: 52,
            decoration: BoxDecoration(
              color: isSelected ? Colors.white : null,
            ),
            child: Text(
              title,
              style: TextStyle(
                color: isSelected ? AppColors.app_main : Color(0xFF666666),
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          if (isSelected)
            Positioned(
              left: 3,
              top: 16,
              bottom: 16,
              width: 3,
              child: Container(
                decoration: BoxDecoration(
                  color: AppColors.app_main,
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
        ],
      ),
    );
  }
}
